<template>
  <div>
    <head-view/>
    <div class="tong">
      <div class="serach ww" :style="{backgroundImage: 'url('+require('@/assets/images/bgc1.png')+')'
      ,backgroundRepeat: 'no-repeat'
      ,backgroundSize: '100% 100%'
      }">
      </div>
    </div>
    <div class="elegant-aero">
      <el-form ref="form" :model="form" label-width="80px">
        <h1>登录
        </h1>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="留言" prop="content">
          <el-input v-model="form.content" placeholder="" resize="none"
                    type="textarea" :autosize="{ minRows: 6, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">Send</el-button>
        </el-form-item>
      </el-form>
    </div>
    <footer-view/>
  </div>
</template>

<script>
  import HeadView from '@/components/HeadView/index'
  import FooterView from '@/components/FooterView/index'
  import {pushMessage} from '@/api/message'
  import {MessageBox} from "element-ui";
  import {getToken} from '@/utils/auth'
  export default {
    name: "message",
    components: {HeadView, FooterView},
    data() {
      return {
        form: {
          name: '',
          phone: '',
          content: ''
        }
      }
    },
    methods: {
      /** 提交按钮 */
      submitForm() {
        if(!getToken()){
          MessageBox.confirm('请登录后操作', '系统提示', {
              confirmButtonText: '前往登录',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            location.href = '/login';
          })
          return;
        }
        let _this = this;
        pushMessage(_this.form).then(response => {
          MessageBox.confirm('留言成功', '系统提示', {
              confirmButtonText: '确认',
            showCancelButton: false,
            type: 'success '
            }
          ).then(() => {
            let _this = this;
            _this.from = {
              name: '',
              phone: '',
              content: ''
            }
            _this.resetForm("form");
          })
        })
      },
    }
  }
</script>

